<template>

  <div class="container">
    <LeftNavMenu/>
    <!-- 查询条件 -->
    <div class="check" style="margin-left: 140px; padding-top: 10px;">
      <el-form :inline="true">
        <el-row>
          <el-form-item label="用户ID:" class="item">
            <el-input clearable v-model="queryParam.userId" placeholder="请输入用户ID" style="width: 150px;"></el-input>
          </el-form-item>
          <el-form-item label="阶段数:" class="item">
            <el-select @change="stageChange" v-model="stageValue" placeholder="请选择" clearable>
              <el-option
                  v-for="item in stageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
<!--            <el-input clearable v-model="queryParam.stageId" placeholder="请输入阶段数" style="width: 150px;"></el-input>-->
          </el-form-item>
          <el-form-item label="轮数:" class="item">
            <el-select @change="roundChange" v-model="roundValue" placeholder="请选择" clearable>
              <el-option
                  v-for="item in roundOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
<!--            <el-input clearable v-model="queryParam.roundId" placeholder="请输入轮数" style="width: 150px;"></el-input>-->
          </el-form-item>
          <el-button class="el-icon-search" size="medium" type="primary" @click="toA">查询</el-button>
        </el-row>
      </el-form>
    </div>

    <!-- 本轮资产，本轮收益两个echarts表格组件 -->
    <div class="chart">
      <div class="chart-wrapper"><rate :ratio="tableData"></rate></div>
      <div class="chart-wrapper"><test2 :fund="tableData"></test2></div>
    </div>
    <!-- 查询基金数目复选框 -->
    <div class="choice" style="margin-left: 400px ;">
      <span class="text">请选择您要查看的基金:&nbsp;</span>
      <el-select @change="change" v-model="value" placeholder="请选择" clearable>
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!-- 基金走势折线统计图 -->
    <div class="jijin">
      <tongjitu1 v-if="value == '1'" :t1="tongjiData"></tongjitu1>
      <tongjitu2 v-if="value == '2'" :t2="tongjiData"></tongjitu2>
      <tongjitu3 v-if="value == '3'" :t3="tongjiData"></tongjitu3>
    </div>
  </div>

</template>

<script>
import {listFundsSelective,listFundByFundId} from '@/api/ExperimentFund'
import LeftNavMenu from '@/components/leftNavMenu'
import tongjitu1 from '@/components/tongjitu1.vue'
import tongjitu2 from '@/components/tongjitu2.vue'
import tongjitu3 from '@/components/tongjitu3.vue'
import test2 from '@/components/shuliang.vue'
import rate from '@/components/rate.vue'

export default {
  name: "userInput",
  components:{
    tongjitu1,
    tongjitu2,
    tongjitu3,
    rate,
    test2,
    LeftNavMenu
  },
  data() {
    return {
      queryParam: {
        userId: null,
        stageId: null,
        roundId: null
      },
      tableData: [],
      tongjiData: [],
      copyData: [],
      options: [{
        value: '1',
        label: '基金一'
      }, {
        value: '2',
        label: '基金二'
      }, {
        value: '3',
        label: '基金三'
      }],
      value: '',
      stageOptions: [{
        value: '1',
        label: '阶段一'
      }, {
        value: '2',
        label: '阶段二'
      }, {
        value: '3',
        label: '阶段三'
      }],
      stageValue: '',
      roundOptions: [{
        value: '1',
        label: '第1轮'
      }, {
        value: '2',
        label: '第2轮'
      }, {
        value: '3',
        label: '第3轮'
      }, {
        value: '4',
        label: '第4轮'
      }, {
        value: '5',
        label: '第5轮'
      }, {
        value: '6',
        label: '第6轮'
      }, {
        value: '7',
        label: '第7轮'
      }, {
        value: '8',
        label: '第8轮'
      }, {
        value: '9',
        label: '第9轮'
      }, {
        value: '10',
        label: '第10轮'
      }, {
        value: '11',
        label: '第11轮'
      }, {
        value: '12',
        label: '第12轮'
      }],
      roundValue: ''
    }
  },
  methods: {

    roundChange(){
      this.queryParam.roundId = parseInt(this.roundValue)
    },

    stageChange(){
      this.queryParam.stageId = parseInt( this.stageValue )
    },

    change(){
      var query = {
        userId: parseInt( this.queryParam.userId ),
        stageId: parseInt( this.stageValue ),
        fundId: parseInt(this.value)
      }
      if(this.queryParam.userId != null && this.queryParam.userId != '' && this.stageValue != '' && this.value != ''){
        console.log(query)
        this.copyData = []
        listFundByFundId(query).then(res => {
          for (var i = 0; i < 12; i++) {
            this.copyData.push(res.data.data.FundByFundId[i].fundPoint)
            this.tongjiData = this.copyData
          }
          console.log(this.tongjiData)
        })
      }
    },

    toA(){
      if(this.queryParam.userId != null && this.stageValue != '' && this.roundValue != ''){
        listFundsSelective(this.queryParam).then(res => {
          this.tableData = res.data.data.FundsSelective
          console.log(this.tableData)
        })
      }
    },

  }
}
</script>

<style lang="less">
.container{
  background-color: #35495e;
  height: 100%;
  margin-left: 180px;
  .item{
    .el-form-item__label{
      color: #0099FC;
    }
  }
  .text{
    color: #0099FC;
  }
  .chart{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    .chart-wrapper{
      width: 400px;
      height: 270px;
      background-color: #E8E8E8;
      border-radius: 10px;
      box-shadow: 0 2px 10px 3px #B0C4DE;
    }
  }

  .choice{
    padding-top: 20px;
  }

  .jijin{
    width: 1000px;
    height: 300px;
    background-color: #f5f5f5;
    border-radius: 10px;
    box-shadow: 0 2px 10px 3px #B0C4DE;
    margin: 0 auto;
    margin-top: 10px;
  }

  .el-row{
    margin-bottom: -20px;
  }
}
</style>
